<template>
  <div class="gantt-setting">
    <div class="column grid-setting">
      <section class="setting-item">
        <i class="iconfont icon-column_set" />
        <span @click="setGridColumns">设置列</span>
        <el-select
          ref="select"
          v-model="options.gridColumnsArr"
          size="mini"
          width="100"
          multiple
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="item in GridColumnsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </section>
    </div>
    <div class="column">
      <el-dropdown size="medium" trigger="click" @command="onDropMenuClicked">
        <span class="el-dropdown-link setting-item row-type">
          缩放<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(zoom, key) in zoom_ZH"
            :key="key"
            :class="{
              active: options.active_zoom === key
            }"
            :command="key"
          >
            {{ zoom }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <el-popover trigger="click">
        <div class="sort-options">
          <div class="progress">
            <span
              v-for="option in options.gridColumnsArr"
              :key="option"
              :class="{
                isActive: option === active_sort
              }"
              @click="active_sort = option"
            >
              {{ gridColumns[option] }}
            </span>
          </div>
        </div>
        <div slot="reference" class="setting-item row-type" @click="sortGridData">
          <span>排序</span>
          <i class="iconfont icon-sort" />
        </div>
      </el-popover> -->
    </div>

    <!-- <div class="column timeline-setting">timeline setting</div> -->
  </div>
</template>

<script lang="ts">
import Vue, { ComponentInstance } from 'vue'
import { Component, Ref, Prop, Emit, Watch } from 'vue-property-decorator'
import { Dictionary } from '@/interface/Basic'
import { SelectOptionsType } from '@/interface/ElementUI'
type ZoomType = 'day' | 'week' | 'month' | 'year'
interface OptionsType {
  gridColumnsArr: string[]
  active_zoom: ZoomType
}
@Component({
  name: 'gant-setting'
})
class GanttSetting extends Vue {
  // ref
  @Ref() readonly select!: ComponentInstance
  // prop
  @Prop() gridColumns!: Dictionary<string>
  @Prop() curColumns!: string[]
  // 排序功能
  gridColumns_ZH: Dictionary<string> = {
    progress: '完成进度',
    start_date: '开始日期',
    end_date: '结束日期'
  }
  zoom_ZH: Dictionary<string> = {
    day: '按日',
    week: '按周',
    month: '按月',
    year: '按年'
  }
  options: OptionsType = {
    gridColumnsArr: [...this.curColumns],
    active_zoom: 'week'
  }
  active_sort: string = 'start_date'
  // 缩放功能
  get GridColumnsOptions() {
    const arr: SelectOptionsType<string> = []
    Object.keys(this.gridColumns).forEach(column => {
      if (column !== 'meter') {
        arr.push({
          label: this.gridColumns[column],
          value: column
        })
      }
    })
    return arr
  }
  @Watch('options', { deep: true })
  op_handler(newVal: OptionsType) {
    this.storeDashboardOptions('grid_setting', newVal)
  }
  // 生命周期
  mounted() {
    this.initDashboardOptions('grid_setting', this.options).then(res => {
      this.options = res
    })
  }
  // methods
  @Emit('grid-column-change')
  @Watch('options.gridColumnsArr')
  onGridColumnsBlur(newVal: string[]) {
    return newVal
  }
  @Emit('zoom-change')
  @Watch('options.active_zoom')
  onDropMenuClicked(newVal: ZoomType, oldVal?: ZoomType) {
    if (newVal !== oldVal) this.options.active_zoom = newVal
    return newVal
  }
  @Emit('grid-sort-change')
  sortGridData() {
    return this.active_sort
  }
  // methods
  setGridColumns() {
    const select = this.select as any
    select.toggleMenu()
  }
  initDashboardOptions<T>(tab: string, options: T): Promise<T> {
    return new Promise(resolve => {
      const result = localStorage.getItem('pcls-prefer-daskboard-confirguration')
      let option: Dictionary<any> = {}
      if (!result) {
        option[tab] = options
        localStorage.setItem('pcls-prefer-daskboard-confirguration', JSON.stringify(option))
      } else if (JSON.parse(result)[tab]) {
        resolve(JSON.parse(result)[tab])
      } else {
        const parse_result = JSON.parse(result)
        parse_result[tab] = options
        option = parse_result
        localStorage.setItem('pcls-prefer-daskboard-confirguration', JSON.stringify(option))
      }
    })
  }
  storeDashboardOptions<T>(tab: string, options: T) {
    const result = localStorage.getItem('pcls-prefer-daskboard-confirguration')
    if (!result) {
      const option: Dictionary<any> = {}
      option.setting = options
      localStorage.setItem('pcls-prefer-daskboard-confirguration', JSON.stringify(option))
    } else {
      const parse_result = JSON.parse(result)
      parse_result[tab] = options
      localStorage.setItem('pcls-prefer-daskboard-confirguration', JSON.stringify(parse_result))
    }
  }
}
export default GanttSetting
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
@import '~@/styles/mixin.less';
.gantt-setting {
  // width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  #text-color(--primary-text-color);
  .column {
    // box-sizing: border-box;
    // padding: 0 10px;
    height: 100%;
    margin-right: 8px;
    #flex(column, center, flex-start);
    // border-right: solid 1px;
    // #border-color(right, --primary-border-color);
    .setting-item {
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      /deep/.el-select {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px !important;
        .el-select__tags {
          display: none;
        }
        .el-input {
          visibility: hidden;
        }
      }
      i {
        font-size: 20px;
      }
    }
    .row-type {
      flex-direction: row;
      padding: 4px 2px;
      font-size: 14px;
      #flex(row, center, space-between);
      #color(color, --primary-text-color);
      i {
        margin-left: 2px;
        font-size: 14px;
      }
    }
    .setting-item:hover {
      #bg-color(--primary-hover-text-color);
    }
  }
}
.sort-options {
  .progress {
    flex-wrap: wrap;
    #flex(row, flex-start, flex-start);
    .isActive {
      color: #ffffff;
      #color(background-color, --primary-blue-color);
    }
    span {
      box-sizing: border-box;
      padding: 5px;
      margin: 0 5px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      #color(color, --primary-text-color);
    }
  }
}
</style>
